
(function(){
	let lpList = document.querySelector(".product>ul");
	
	let oMore = document.querySelector(".more");
	
	console.log(oMore); 
	
	let data = {
		page : 1,
		pagesize : 6
	};
	bannerinfo()
	
	goodslist()
	oMore.onclick = ()=>{
		data.page ++;
		
		goodslist()
	};
	
	
	
	console.log(data)
	
	//热门良品
	function goodslist(){
		json.get(`${URL}/api_goods`,{page:data.page , pagesize:data.pagesize},function(even){
		
			if(even.code != 0){
				return;
			}
			
			even.data.forEach(function(item){
				let li = document.createElement('li');
				li.innerHTML= `
				<li>
					<div class="product-page">
						<img src="${item.goods_thumb}">
						<div class="maker">
							<a href="product.html?goodsId=${item.goods_id}">
								<p>${item.price}￥</p>
								<p>${item.goods_name}</p>
								<p>${item.goods_desc}</p>
							</a>
						</div>
					</div>
					<div class="product-info flex-row-col-center">
						<a class="flex-row align-center">
							<img src="${item.brand_thumb}">
							<span>${item.brand_name}</span>
						</a>
						<div>
							<span>${item.star_number}</span>
							<span>♥</span>
						</div>
					</div>
				</li>
				`;
				lpList.appendChild(li);
			});
			
			
		});
	}
	
	
	
	
})();


//渲染轮播图
function bannerinfo(){
	let oBanner = document.querySelector(".banner");
		let oPrev = document.getElementById("prev");
		let oNext = document.getElementById("next");
		
		let oSpan = document.getElementsByTagName("span");
		let oUi = document.getElementById("list");
	json.get(URL + `/api_banner`,{bannerId : "1"},even =>{
		console.log(even)
		if(even.code != 0){
			console.log(even);
			return;
		}
		
		let str = "";
		even.data.forEach(item =>{
			str += ` <li class=""><img src="${item.goods_thumb}" alt=""></li>`;
			
		});
		console.log(oUi.innerHTML)
		oUi.innerHTML = str + ` <li class=""><img src="${even.data[0].goods_thumb}" alt=""></li>`;
		
		let oLi = document.querySelectorAll(".list>li");
		
		let n = 0;
		let time = setInterval(function(){
					let liW = oLi[0].offsetWidth;
					
				    n++;
				     
				    // n = n % oLi.length;
				    L = true;
				    n = n > oLi.length -1 ? 0 : n; 		
				    oUi.style.left =  -n*liW+"px";
				    oUi.style.transition = "0.5s";
					
					oUi.ontransitionend = function(){
						L = false;
						// if(lock == false)return;
							lock = true;
						
						
						if(n >= oLi.length -1){
							console.log("111")
							oUi.style.left = "0px";
							oUi.style.transition = "none";
							n = 0;
						};
						
					};
				},2000);
		
		
		
		oBanner.onmouseleave = function(){
			time = setInterval(function(){
						let liW = oLi[0].offsetWidth;
						
					    n++;
					     
					    // n = n % oLi.length;
					    L = true;
					    n = n > oLi.length -1 ? 0 : n; 		
					    oUi.style.left =  -n*liW+"px";
					    oUi.style.transition = "0.5s";
						
						oUi.ontransitionend = function(){
							L = false;
							// if(lock == false)return;
								lock = true;
							
							// console.log(oLi.length+1)
							// console.log(n)
							// console.log(oLi.length)
							if(n >= oLi.length -1){
								console.log("111")
								oUi.style.left = "0px";
								oUi.style.transition = "none";
								n = 0;
							};
							
						};
					},2000);
	
		};
		
		
		oBanner.onmouseenter = function(){
			clearTimeout(time);
			banner(n)
		};
		
		
		
		//轮播图
		function banner(n){
			
			
			// console.log(oLi)
			
			
			let liW = oLi[0].offsetWidth;
			
			
			let L = false;
			oNext.onclick = function (){
				 
				
				 if(L) return;
				 n++;
				 
				// n = n % oLi.length;
				L = true;
				n = n > oLi.length -1 ? 0 : n; 		
				oUi.style.left =  -n*liW+"px";
				oUi.style.transition = "0.5s";
				
				
				
				// for(let i = 0 ; i < oLi.length ; i++){
				// 	oLi[i].style.left = "-660px"
				// 	oSpan[i].style.background = "#999"
				// }
				// oLi[n].style.display = "block";
				// oSpan[n].style.background = "red";
			}
			
			oPrev.onclick = function(){
				 console.log("aa")
				 n--;
				 console.log(liW);
				 // n = n == -1 ? 0 : n; 	
				
				if(n < 0){
					n = oLi.length-1;
					
					oUi.style.left =  -n*liW+"px";
					oUi.style.transition = "none";
					
					n--;
				}
				
				    
				//设置  同步程序高于异步程序
				
				setTimeout(function(){
					oUi.style.left =  -n*liW+"px";
					oUi.style.transition = "0.5s";
				})
				 
			        
				
			}
			
			oUi.ontransitionend = function(){
				L = false;
				// if(lock == false)return;
					lock = true;
				
				// console.log(oLi.length+1)
				// console.log(n)
				// console.log(oLi.length)
				if(n >= oLi.length -1){
					console.log("111")
					oUi.style.left = "0px";
					oUi.style.transition = "none";
					n = 0;
				};
				
			};
			
			
			// for(let i = 0 ; i < oSpan.length ; i++){
				
				
			// 	oSpan[i].onclick = function(){
			// 		n = i;	 
			// 		lun()
			// 	}
				
			// }	
			
			
				
		}
	});
	
	
	
}

